<template>
<view class="page">
    <view class="search-box">
        <input class="search-input" type="text" placeholder="请输入店铺名称"  v-model="searchObject.name"  />
        <view class="search-btn" @click="onSearch">搜索</view>
    </view>

    <block v-for="item in shops" >
      <view class="item" :class="{ selected: selectedShopId === item.id }" @click="selectShop(item)" >
        <view class="header">
          <image class="logo" :src="item.logo"></image>
          <view class="content">
            <view class="info">
              <view class="name">{{item.name}}({{item.fee}})</view>
            </view>
            <view class="info" style="margin-top: 15rpx;">
              <view class="date">{{item.address}}</view>
            </view>
          </view>
          <view class="select-icon" v-if="selectedShopId === item.id">
            <view class="icon-selected"></view>
          </view>
        </view>
      </view>
    </block>

  <view class="bt_area">
    <view class="bt" @click="next">
      下一步
    </view>
  </view>


</view>
</template>

<script setup>
import {ref} from 'vue'
import {useLoadList} from "../../common/data";
import {onLoad} from "@dcloudio/uni-app";

const searchObject = ref({
	name: '',
})

const {listData:shops,refresh} = useLoadList('front_shop_list', searchObject)

// 接收时间参数
const selectedDate = ref('')

// 页面加载时获取传递的参数
onLoad((options) => {
  if (options.date) {
    selectedDate.value = options.date
    console.log('接收到的时间参数:', selectedDate.value)
  }
})


const onSearch = () => {
	console.log(searchObject.value.name)
  refresh();
}

const selectedShopId = ref(null)

const selectShop = (e) => {
	console.log(e)
  selectedShopId.value=e.id
}

const next = (e) => {
  if (!selectedShopId.value) {
    uni.showToast({
      title: '请选择店铺',
      icon: 'none',
      duration: 2000
    })
    return
  }

  // 跳转到pub页面，传递选中的店铺ID和时间
  let url = `/pages/topic/pub?id=${selectedShopId.value}`
  if (selectedDate.value) {
    url += `&date=${selectedDate.value}`
  }

  uni.navigateTo({
    url: url
  })
}


</script>

<style>

.bt_area{
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;

}

.bt {

  width: 690rpx;
  height: 88rpx;
  background: #AA0E99;
  border-radius: 10rpx;
  line-height: 88rpx;
  text-align: center;
  font-size: 36rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
}


/* components/coupon/index.wxss */
.page{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.search-box {
  display: flex;
  width: 93vw;
  height: 80rpx;
  background: #FFFFFF;
  border-radius: 40rpx;
  margin: 20rpx 0;
  padding: 0 30rpx;
  box-sizing: border-box;
  box-shadow: 0px 2px 10px 0px rgba(201, 190, 214, 0.2);
}

.search-input {
  flex: 1;
  height: 80rpx;
  font-size: 28rpx;
}

.search-btn {
  width: 100rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 28rpx;
  color: #AA0E99;
  font-weight: 500;
}

.item {
  background: #FFFFFF;
  box-shadow: 0px 2px 10px 0px rgba(201, 190, 214, 0.2);
  border-radius: 12px;
  padding: 16rpx 20rpx;
  box-sizing: border-box;
  width: 93vw;
  margin-bottom: 20rpx;
  position: relative;
}

.item.selected {
  border: 2rpx solid #AA0E99;
  background-color: rgba(255, 0, 122, 0.05);
}

.header {
  display: flex;
  position: relative;
}

.header .content {
  flex-grow: 1;
}

.date {
  font-size: 24rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #666666;
  line-height: 17px;
  max-width: 50vw;
}

.fee {
  font-size: 24rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #999999;
  line-height: 17px;
  min-width: 110rpx;
}

.name {
  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #333333;
}
.name.influencer{
  color: #a1a1a1;
}

.info {
  display: flex;
  justify-content: space-between;
}

.logo {
  min-width: 120rpx;
  width: 120rpx;
  height: 120rpx;
  background-color: antiquewhite;
  margin-right: 15rpx;
  border-radius: 18rpx;
}

.select-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-selected {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  background: linear-gradient(90deg, #FF007A 0%, #AA0E99 100%);
  position: relative;
}

.icon-selected::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -70%) rotate(-45deg);
  width: 15rpx;
  height: 8rpx;
  border-left: 2rpx solid white;
  border-bottom: 2rpx solid white;
}

.coupon {
  border-radius: 12px;
  padding: 10rpx 0rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #AA0E99;
}

.tip {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;

  font-size: 25rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #666666;
  line-height: 17px;
}

.tip .left {
  display: flex;
  align-items: center;
}

.tip .txt {

  color: #6798FF;
}

.bt_area {
  display: flex;
  margin-top: 20rpx;
  margin-bottom: 30rpx;

}



</style>
